<template>
  <div class="bigbox">
    <el-row style="padding:0 30px;">
      <el-col :span="3">
        <div class="logo">
          <img src="http://crm.cimns.com/static/img/logo.3e34073.png" alt />
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <ul class="nav">
            <router-link to="/office/gzt" tag="li" active-class="active">
              <i class="iconfont icon-diannao"></i> 办公
            </router-link>

            <router-link to="/gold" tag="li" active-class="active">
              <i class="iconfont icon-kehuguanli"></i> 客户管理
            </router-link>
            <router-link to="/shoplk" tag="li" active-class="active">
              <i class="iconfont icon-shujutubiao"></i> 商业智能
            </router-link>
            <router-link to="/taskall" tag="li" active-class="active">
              <i class="iconfont icon-xiangmu"></i> 项目管理
            </router-link>
          </ul>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="  
          float: right;  
    line-height: 50px;
    display: inline-block;
    box-sizing: border-box;">
          <span class="ktgood">开通授权</span>
          <span class="idname" style="display:inline-block;">
            <img v-if="info.img" :src="info.img" alt style="width:35px;height:35px;" />
            <i class="covers" v-else>{{info.id-1}}</i>
          </span>
          <span style="margin-left:15px;">
            <el-dropdown style=" position:absolute;top:5px;right :-50px;">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom">
                  <router-link to="/me">个人中心</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="iconfont icon-tuichudenglu">
                  <strong @click="loginout">退出登录</strong>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">版本V99999999</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Toast } from "vant";
import http from "@/util/http.js";
export default {
  name: "",
  data() {
    return {
      info: "",
    };
  },
  mounted() {
    http.post("admin/users/read").then((res) => {
      console.log(res.data.data);
      this.info = res.data.data;
    });
  },
  methods: {
    loginout() {
      Toast.loading({
        message: "退出中...",
      });
      console.log("out");
      window.sessionStorage.clear();
      window.localStorage.clear();

      this.$router.push("/login");
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.bigbox {
  margin-bottom: 1px;
  box-shadow: inset 0 -4px 2px -3px #c7d1da;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.logo {
  width: 150px;
  height: 40px;
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 15px;
  padding: 10px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.ktgood {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#d9ac7c),
    to(#c28e5c)
  );
  background: linear-gradient(90deg, #d9ac7c, #c28e5c);
  color: #fff;
  padding: 5px 15px;
  font-size: 12px;
  height: 24px;
  outline: none;
  border: none;
  border-radius: 12px;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  margin: 0 15px 0 0;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.idname {
  width: 35px;
  height: 35px;
  line-height: 50px;
  background: rgb(62, 132, 233);
  color: #fff;
  border-radius: 50%;
  overflow: hidden;

  position: absolute;
  top: 13px;

  .covers {
    text-align: center;
    display: block;
    line-height: 35px;
  }
}
.active {
  color: rgb(62, 132, 233);
}
.nav {
  li {
    display: flex;
    line-height: 50px;
    display: inline-block;
    padding: 0 30px;
    box-sizing: border-box;

    a {
      text-decoration: none;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  position: relative;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
